<template>
    <div class="box5">
        <div class="title">
            <p> 未来七天游客数量趋势图</p>
            <img src="../../images/dataScreen-title.png" alt="">
        </div>

        <div class="charts" ref="line">

        </div>
    </div>
</template>

<script setup lang='ts' name='Line'>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

let line = ref();

onMounted(() => {
    let mycharts = echarts.init(line.value)
    mycharts.setOption({
        title: {
            text: '游客访问量趋势图',
        },
        // x | y 轴
        xAxis: {
            type: 'category',
            boundaryGap: false,
            /// 分隔线
            splitLine: {
                show: false
            },
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日', '周八', '周九', '周十', '周十一'],
        },
        yAxis: {/// 分隔线
            splitLine: {
                show: false
            },
            // 轴线显示
            axisLine: {
                show: true
            },
            // 刻度
            axisTick: {
                show: true
            },
        },
        grid: {
            left: 40,
            right: 0,
            top: 0,
            bottom: 20,
        },
        series: [
            {
                type: 'line',
                data: [120, 240, 66, 99, 321, 123, 456, 789, 234, 567, 890],
                // 平滑曲线
                smooth: true,
                /// 区域填充样式
                areaStyle: {
                    color: 'rgba(0, 255, 255, 0.5)',
                },
            }
        ]
    })
})

</script>

<style scoped lang='scss'>
.box5 {
    width: 100%;
    height: 100%;
    background: url('../../images/dataScreen-main-cb.png') no-repeat;
    margin: 0 10px;

    .title {
        margin-left: 10px;

        p {
            color: white;
            font-size: 16px;
        }
    }

    .charts {
        height: calc(100% - 40px);

    }
}
</style>